<script setup>
import { reactive, ref, watch } from 'vue'
import ImageUpload from '@/components/ImageUpload.vue'
import { ElMessage } from 'element-plus'
import { addBrand, updateBrand } from '@/service/brand.js'
const props = defineProps({
  type: {
    type: String,
    default: 'add',
    required: true,
  },
})
const showModal = ref(false)

const emits = defineEmits(['update'])
const brandForm = reactive({
  id: null,
  brandName: '',
  brandProfile: '',
  brandWeight: 10,
  brandImage: null,
})
const brandFormRef = ref()
watch(showModal, (value) => {
  if (!value) {
    Object.assign(brandForm, {
      id: null,
      brandName: '',
      brandProfile: '',
      brandWeight: 10,
      brandImage: null,
    })
    // 重置表单校验状态
    brandFormRef.value.resetFields()
  }
})
const rules = reactive({
  brandName: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' },
    { min: 1, max: 20, message: '品牌名称长度需在 1-10 字之间', trigger: 'blur' },
    {
      whitespace: true,
      message: '品牌名称不能仅包含空格',
      trigger: 'blur',
    },
  ],
  brandProfile: [
    { required: true, message: '请输入品牌简介', trigger: 'blur' },
    { min: 1, max: 400, message: '品牌简介长度需在 1-400 字之间', trigger: 'blur' },
    {
      whitespace: true,
      message: '品牌简介不能仅包含空格',
      trigger: 'blur',
    },
  ],
  brandWeight: [{ required: true, message: '请输入品牌权重', trigger: 'blur' }],
  brandImage: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value || value === '') {
          callback(new Error('请上传品牌图片'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
})
async function onTapSaveButton() {
  try {
    await brandFormRef.value.validate()
    const params = {}
    params.brandName = brandForm.brandName
    params.brandProfile = brandForm.brandProfile
    params.brandWeight = brandForm.brandWeight
    params.brandImage = brandForm.brandImage
    await addBrand(params)
    ElMessage.success('成功添加品牌！')
    emits('update')
    showModal.value = false
  } catch {
    ElMessage.error('请检查表单是否已经填写完整！')
  }
}
async function onTapUpdateButton() {
  try {
    await brandFormRef.value.validate()
    const params = {}
    params.id = brandForm.id
    params.brandName = brandForm.brandName
    params.brandProfile = brandForm.brandProfile
    params.brandWeight = brandForm.brandWeight
    params.brandImage = brandForm.brandImage
    await updateBrand(params)
    ElMessage.success('成功更新品牌！')
    emits('update')
    showModal.value = false
  } catch {
    ElMessage.error('请检查表单是否已经填写完整！')
  }
}

defineExpose({
  showModal,
  brandForm,
})
</script>

<template>
  <el-dialog  v-model="showModal" :title="type === 'add' ? '新增品牌' : '编辑品牌'" draggable width="800">
    <el-form ref="brandFormRef" :model="brandForm" :rules="rules" label-position="right" label-width="100px">
      <el-form-item label="品牌名称:" prop="brandName">
        <el-input v-model="brandForm.brandName" maxlength="20" placeholder="请输入品牌名称" show-word-limit />
      </el-form-item>
      <el-form-item label="品牌简介:" prop="brandProfile">
        <el-input
          v-model="brandForm.brandProfile"
          autosize
          maxlength="400"
          placeholder="请输入品牌简介"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="品牌权重:" prop="brandWeight">
        <el-input-number
          v-model="brandForm.brandWeight"
          :controls="false"
          :max="999"
          :min="1"
          :precision="0"
          value-on-clear="min"
        />
      </el-form-item>
      <el-form-item label="品牌图片:" prop="brandImage">
        <ImageUpload v-model="brandForm.brandImage"></ImageUpload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="type === 'add'" type="primary" @click="onTapSaveButton">保存</el-button>
      <el-button v-if="type === 'edit'" type="primary" @click="onTapUpdateButton"> 更新 </el-button>
      <el-button type="default" @click="showModal = false"> 取消 </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
